<template>
    <div class="main-content">
        <TableLayoutes form-title="" class="table-list"> 
            <div class="table-title" slot="table-title">
                <span class="table-title-span">收费方式</span>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-loading='loading'>                     
                <el-table-column prop="sName" label="收费方式名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sName | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sDesc" label="收费方式详情" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sDesc | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </TableLayoutes>
    </div>
</template>

<script>
import TableLayoutes from 'components/TableLayoutes';
import { listIncrementService } from 'api/serviceManage';
export default{
    name: 'chargeWays',
    components: {TableLayoutes},
    data() {
        return {
            loading: true,
            tableData: []
        }
    },
    computed: {
      
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            listIncrementService().then(response => {
                this.loading = false;

                // 商品类型(1:服务种类 2:收费方式 3：收费范围)
                response.data.content.forEach(function(element) { 
                    if (element.sType == '2') {
                        this.tableData.push(element);
                    }
                }, this);
            }).catch(() => {
                this.loading = false;
            });
        }
    }
}
</script>
<style lang="scss" >
    .main-content {
        position: relative;
        padding: 0px;
        .table-list {
            .table-box {
                padding-bottom: 0px;
            }
        } 
    }
</style>                     